<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: LiYansheng
 * @Date: 2022-04-02 21:59:48
 * @LastEditors: CoderXZ
 * @LastEditTime: 2022-04-08 14:10:11
-->
<template>
  <div class="container">
    <el-switch v-model="isOK" active-color="#13ce66" inactive-text="是否签订了三方？">
    </el-switch>
    <el-card v-if="isOK">
      <el-row>
        <el-col :span="5" :offset="15">
          <el-button type="primary" @click="edit()" :disabled="!editable">编辑</el-button>
          <el-button type="primary" @click="saveEdit()" :disabled="editable"
            >保存</el-button
          >
          <el-button type="danger" @click="edit()" :disabled="editable">取消</el-button>
        </el-col>
      </el-row>
      <el-divider><h3 style="text-align: center">三方信息</h3> </el-divider>
      <el-form :model="tripartite" label-width="80px">
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-form-item label="协议编号:">
              <el-input
                v-model="tripartite.agreementNo"
                placeholder=""
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="签约时间:">
              <el-date-picker
                v-model="tripartite.signingTime"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :disabled="editable"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-form-item label="单位名称:">
              <el-input
                v-model="tripartite.company"
                placeholder=""
                :disabled="editable"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="组织代码:">
              <el-input
                v-model="tripartite.code"
                placeholder=""
                :disabled="editable"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-form-item label="岗位:">
              <el-input
                v-model="tripartite.job"
                placeholder=""
                :disabled="editable"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="薪资:">
              <el-input
                v-model="tripartite.salary"
                placeholder=""
                :disabled="editable"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-form-item label="单位地址:">
              <el-input
                v-model="tripartite.address"
                placeholder=""
                :disabled="editable"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="邮编:">
              <el-input
                v-model="tripartite.postCode"
                placeholder=""
                :disabled="editable"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-form-item label="联系人:">
              <el-input
                v-model="tripartite.contacts"
                placeholder=""
                :disabled="editable"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="电话:">
              <el-input
                v-model="tripartite.phone"
                placeholder=""
                :disabled="editable"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-form-item label="报到时间:" :disabled="editable">
              <el-date-picker
                v-model="tripartite.registrationTime"
                type="date"
                placeholder="选择日期"
                :disabled="editable"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="违约金:">
              <el-input
                v-model="tripartite.penalty"
                placeholder=""
                :disabled="editable"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-form-item label="备注:">
              <el-input
                v-model="tripartite.remark"
                type="textarea"
                placeholder=""
                :disabled="editable"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="应聘渠道:">
              <el-radio-group v-model="tripartite.channel">
                <el-radio
                  :label="j.name"
                  v-for="(j, index) in jobApps"
                  :key="index"
                  :disabled="editable"
                ></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 三方照片上传 -->
  </div>
</template>

<script>
import { getTripartite, update } from "../../api/tripartite.js";
import { jobApp } from "../../../public/data.json";
export default {
  name: "tripartite",
  created() {
    getTripartite()
      .then((result) => {
        if (result.status == "200") {
          this.tripartite = result.data.tripartite;
          this.isOK = result.data.c;
        } else {
          this.$message.error(result.message);
        }
      })
      .catch((err) => {});
  },
  data() {
    return {
      editable: true,
      isOK: null,
      jobApps: jobApp,
      tripartite: {},
    };
  },
  methods: {
    edit() {
      this.editable = !this.editable;
    },
    saveEdit() {
      update(this.tripartite)
        .then((result) => {
          if (result.status == "200") {
            console.log(this.tripartite);
            this.$message.success("修改成功！");
            this.editable = !this.editable;
          } else {
            this.$message.error(result.message);
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style>
.el-upload {
  margin-top: 1cm;
}
.el-card {
  margin-top: 1cm;
}
</style>
